<template>
  <div class="index-container">
    <RayTable ref="table" :menu="menu" data_object_no="print" :height="tableHeight" :is_permission="false">
      <template #form_append={form,statu}>
        <el-row :gutter="4">
          <el-col :span="24">
            <el-form-item label="模板" prop="json" label-width="120px">
              <el-button type="primary" @click="designPrint(form,statu)">进入设计</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </RayTable>
    <vxe-modal id="printDialog" title="打印设计" v-model="show" :fullscreen="true">
        <RayPrint ref="rayPrint" @save="printSave" :design="true"/>
    </vxe-modal>
  </div>
</template>

<script>
  import RayTable from '@/views/template/components/rayTable.vue'
  export default {
    name: 'form',
    components: {
      RayTable,
    },
    data() {
      return {
        show: false,
        form: {json:null}
      }
    },
    created() {
      this.menu = {}
      this.tableHeight = document.documentElement.clientHeight - 250
    },
    methods: {
      designPrint(form,statu) {
        this.form = form
        this.show = true
        this.$nextTick(() => {
          this.$refs.rayPrint.setTemplate(form.json==undefined?{}:JSON.parse(form.json))
        })
      },
      printSave(json){
        this.$confirm('确认保存该打印模板并进行下一步吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$set(this.form, 'json', json)
          this.show = false;
        })
      }
    }
  }
</script>

<style>
  img {
  	object-fit: fill !important;
  }

  .el-card{
    margin-bottom: 0px !important;
  }
</style>
